<template>
  <div class="profile-page-left">
    <div class="user-info column items-center q-mb-md">
      <bordered-avatar
        :src="currentUser.avatar"
        :isIcon="!currentUser.avatar"
        icon="mdi-account"
        iconColor="sub"
        width="100px"
        height="100px"
        iconSize="64px"
        class="q-my-md"
        @click="changeAvatar"
      >
        <template v-slot:hover-cover>
          <div
            class="column justify-center items-center"
            style="width: 100%; height: 100%"
          >
            <q-icon name="mdi-pen" color="accent" size="32px"></q-icon>
            <div>{{ $t('profile.change') }}</div>
          </div>
        </template>
      </bordered-avatar>
      <div class="name">{{ currentUser.name }}</div>
      <div class="followers q-my-sm" style="color: #808080">
        {{ currentUser.followersCount }} followers
      </div>
      <div class="row q-gutter-x-sm">
        <q-btn color="accent" icon="mdi-upload" dense @click="showUploader" />
        <q-btn
          color="secondary"
          text-color="sub"
          icon="mdi-share-variant"
          dense
        >
          <q-popup-proxy
            anchor="top right"
            self="top left"
            transition-show="flip-right"
            transition-hide="flip-left"
          >
            <share-view />
          </q-popup-proxy>
        </q-btn>
        <q-btn color="secondary" text-color="sub" icon="mdi-pin" dense />
      </div>
    </div>
    <q-list class="page-menu full-height" style="width: 205px !important">
      <q-item
        clickable
        v-ripple
        :active="selected == item.routeName"
        v-for="item in menus"
        :key="item.routeName"
        @click="onItemClick(item)"
        active-class="item-active"
      >
        <q-item-section class="q-ma-xs">{{ $t(item.label) }}</q-item-section>
      </q-item>
    </q-list>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import Me from 'src/models/Me';
import User from 'src/models/User';
import ShareView from 'components/ShareView.vue';
import BorderedAvatar from 'components/BorderedAvatar.vue';
import { useGlobalStore } from 'src/stores/global-store';
export default defineComponent({
  props: {
    title: { type: String, default: '' },
    menus: { type: Array as PropType<PageLeftItem[]>, required: true },
    currentUser: { type: Object as PropType<Me | User>, required: true },
  },
  components: {
    ShareView,
    BorderedAvatar,
  },
  emits: ['onChange'],
  setup(props, { emit }) {
    const globalStore = useGlobalStore();
    const selected = ref(props.menus[0].routeName);
    return {
      selected,
      onItemClick(item: PageLeftItem) {
        selected.value = item.routeName;
        emit('onChange', item);
      },
      showUploader() {
        globalStore.showUploader = true;
      },
      changeAvatar() {
        console.log('changeAvatar');
      },
    };
  },
});
</script>
<style lang="sass" scoped>

.fade-enter-active, .fade-leave-active
  transition: opacity .5s

.fade-enter, .fade-leave-to
  opacity: 0
.profile-page-left
  height: 100%
  .user-info
    .name
      font-size: 20px
    .followers
      font-size: 14px
      color: $sub
    .user-avatar
      position: relative
      font-size: 16px
      .avatar-background
        background-color: #1c1c1c
</style>
